1 位追隨者

使用用戶端腳本

現代網路應用程式，除了呈現並發送到瀏覽器的靜態 HTML 頁面外，還包含 JavaScript，用於通過操作現有元素或通過 AJAX 加載新內容來修改瀏覽器中的頁面。本節介紹 Yii 提供的用於向網站添加 JavaScript 和 CSS 以及動態調整這些的方法。

註冊腳本

當使用 yii\web\View 物件時，您可以動態註冊前端腳本。有兩種專用方法可以執行此操作

註冊內聯腳本

內聯腳本對於配置、動態生成的程式碼以及包含在 小部件 中的可重用前端程式碼創建的小程式碼片段非常有用。用於添加這些的 registerJs() 方法可以如下使用

$this->registerJs(
    "$('#myButton').on('click', function() { alert('Button clicked!'); });",
    View::POS_READY,
    'my-button-handler'
);

第一個參數是我們想要插入到頁面中的實際 JS 程式碼。它將被包裹在 <script> 標籤中。第二個參數確定腳本應插入到頁面中的哪個位置。可能的值為

最後一個參數是一個唯一的腳本 ID，用於識別腳本程式碼塊，並替換具有相同 ID 的現有腳本程式碼塊，而不是添加新的腳本程式碼塊。如果您不提供它，JS 程式碼本身將用作 ID。它用於避免多次註冊相同的程式碼。

註冊腳本檔案

registerJsFile() 的參數與 registerCssFile() 的參數類似。在以下範例中，我們註冊了 main.js 檔案，並依賴於 yii\web\JqueryAsset。這表示 main.js 檔案將在 jquery.js 之後添加。如果沒有這樣的依賴關係規範，main.js 和 jquery.js 之間的相對順序將是未定義的，並且程式碼將無法運作。

可以像下面這樣添加外部腳本

$this->registerJsFile(
    '@web/js/main.js',
    ['depends' => [\yii\web\JqueryAsset::class]]
);

這將為位於應用程式 基本 URL 下的 /js/main.js 腳本添加一個標籤。

強烈建議使用 資源包 來註冊外部 JS 檔案，而不是 registerJsFile()，因為這些資源包可以提供更好的靈活性和更精細的依賴關係配置。此外，使用資源包可以讓您組合和壓縮多個 JS 檔案，這對於高流量網站來說是理想的。

註冊 CSS

與 JavaScript 類似，您可以使用 registerCss() 或 registerCssFile() 註冊 CSS。前者註冊一個 CSS 程式碼塊，而後者註冊一個外部 CSS 檔案。

註冊內聯 CSS 

$this->registerCss("body { background: #f00; }");

上面的程式碼將導致將以下內容添加到頁面的 <head> 部分

<style>
body { background: #f00; }
</style>

如果您想指定樣式標籤的其他屬性，請將名稱-值陣列傳遞給第二個參數。最後一個參數是一個唯一 ID，用於識別樣式塊，並確保在程式碼的不同位置註冊相同樣式的情況下，它只添加一次。

註冊 CSS 檔案

可以使用以下方式註冊 CSS 檔案

$this->registerCssFile("@web/css/themes/black-and-white.css", [
    'depends' => [\yii\bootstrap\BootstrapAsset::class],
    'media' => 'print',
], 'css-print-theme');

上面的程式碼將在頁面的 <head> 部分添加一個指向 /css/themes/black-and-white.css CSS 檔案的連結。

  • 第一個參數指定要註冊的 CSS 檔案。本範例中的 @web 是 應用程式基本 URL 的別名。
  • 第二個參數指定結果 <link> 標籤的 HTML 屬性。選項 depends 是特別處理的。它指定此 CSS 檔案依賴於哪些資源包。在本例中，依賴的資源包是 yii\bootstrap\BootstrapAsset。這表示 CSS 檔案將在來自 yii\bootstrap\BootstrapAsset 的 CSS 檔案之後添加。
  • 最後一個參數指定識別此 CSS 檔案的 ID。如果未提供，則將改為使用 CSS 檔案的 URL。

強烈建議使用 資源包 來註冊外部 CSS 檔案，而不是 registerCssFile()。使用資源包可以讓您組合和壓縮多個 CSS 檔案，這對於高流量網站來說是理想的。它還提供了更大的靈活性，因為您的應用程式的所有資源依賴關係都配置在一個位置。

註冊資源包

如前所述，建議使用資源包而不是直接註冊 CSS 和 JavaScript 檔案。您可以在 「資源」章節 中取得有關如何定義資源包的詳細資訊。至於使用已定義的資源包，這非常簡單

\frontend\assets\AppAsset::register($this);

在上面的程式碼中，在視圖檔案的上下文中，AppAsset 資源包已在目前視圖（由 $this 表示）上註冊。從小部件內部註冊資源包時，您將傳遞小部件的 $view ($this->view)。

產生動態 Javascript

在視圖檔案中，HTML 程式碼通常不是直接寫出的，而是由一些依賴於視圖變數的 PHP 程式碼產生的。為了讓產生的 HTML 可以使用 Javascript 進行操作，JS 程式碼也必須包含動態部分，例如 jQuery 選擇器的 ID。

為了將 PHP 變數插入到 JS 程式碼中，必須正確逸出它們的值。特別是當 JS 程式碼插入到 HTML 中而不是駐留在專用的 JS 檔案中時。Yii 提供了 htmlEncode() 方法，該方法屬於 Json 助手，用於此目的。其用法將在以下範例中展示。

註冊全域 JavaScript 配置

在本範例中，我們使用陣列將全域配置參數從應用程式的 PHP 部分傳遞到 JS 前端程式碼。

$options = [
    'appName' => Yii::$app->name,
    'baseUrl' => Yii::$app->request->baseUrl,
    'language' => Yii::$app->language,
    // ...
];
$this->registerJs(
    "var yiiOptions = ".\yii\helpers\Json::htmlEncode($options).";",
    View::POS_HEAD,
    'yiiOptions'
);

上面的程式碼將註冊一個 <script> 標籤，其中包含 JavaScript 變數定義，例如

var yiiOptions = {"appName":"My Yii Application","baseUrl":"/basic/web","language":"en"};

現在，您可以在 JavaScript 程式碼中像 yiiOptions.baseUrl 或 yiiOptions.language 這樣存取這些。

傳遞翻譯訊息

您可能會遇到這樣一種情況：您的 JavaScript 需要列印一條訊息以響應某些事件。在使用多種語言的應用程式中，此字串必須翻譯為目前的應用程式語言。實現此目的的一種方法是使用 Yii 提供的 訊息翻譯功能，並將結果傳遞給 JavaScript 程式碼。

$message = \yii\helpers\Json::htmlEncode(
    \Yii::t('app', 'Button clicked!')
);
$this->registerJs(<<<JS
    $('#myButton').on('click', function() { alert( $message ); });
JS
);

上面的範例程式碼使用 PHP Heredoc 語法 以獲得更好的可讀性。這也使得大多數 IDE 中的語法高亮顯示效果更好，因此它是編寫內聯 JavaScript 的首選方法，尤其適用於長度超過一行的程式碼。變數 $message 是在 PHP 中創建的，並且由於 Json::htmlEncode，它包含有效的 JS 語法字串，可以將其插入到 JavaScript 程式碼中，以將動態字串放置在對 alert() 的函數呼叫中。

注意：當使用 Heredoc 時，請注意 JS 程式碼中的變數命名，因為以 $ 開頭的變數可能會被解釋為 PHP 變數，並將被其內容替換。$( 或 $. 形式的 jQuery 函數不會被解釋為 PHP 變數，可以安全使用。

yii.js 腳本

注意：本節尚未撰寫完成。它應包含對 yii.js 提供的功能的說明

  • Yii JavaScript 模組
  • CSRF 參數處理
  • data-confirm 處理程序
  • data-method 處理程序
  • 腳本過濾
  • 重定向處理
資料小部件
回到頂部
主題化

發現錯字或您認為此頁面需要改進？
在 github 上編輯 !